<template>
  <div class="menuconfiguration">
    <!--菜单配置 -->
    <div class="con">
        <div class="topbtn">
            <span>logo配置</span>
            <el-button type="primary" class="last-el-button" @click="addfn">新增</el-button>
        </div>
        <div class="mytable">
            <el-table id="demo" ref="table" height="100%" border  stripe :data="tableData" 
            style="width: 100%">
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column label="序号" type="index" width="120" align="center"> </el-table-column>
            <!-- <el-table-column prop="rightname" label="名称" min-width="100" ></el-table-column> -->
            <el-table-column label="logo预览"  min-width="300px">
            <template slot-scope="scope">
              <el-image :src="scope.row.logoInfo" style="max-width: 280px;height: 44px;"
                :preview-src-list="[scope.row.logoInfo]"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <!-- <span>{{ scope.row.enable }}</span> -->
              <el-switch v-model="scope.row.enable " active-color="#13ce66" inactive-color="#dcdfe6"
                @change="switchChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
            <el-table-column label="操作" width="300" align="center">
              <template #default="{row}">
                <div class="public-flex" >
                  <span @click="editfn(row)" style="color:#368ed9;cursor: pointer;font-size:14px">编辑</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog width="450px" draggable  :title="caozuoType" :close-on-click-modal='false' :visible.sync="addeditflagline">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items itemright" style="width:100%;align-items: flex-start;">
                                <div class="leftname"><span>*</span> logo：</div>
                                <el-upload action="" :show-file-list="false" :auto-upload="false" accept="image/*" list-type="picture-card"
                                    :on-change="icon_fn">
                                    <el-image v-if="logoPhoto" :src="logoPhoto" class="avatar"></el-image>
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                         </div>              
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                   <div slot="footer" class="dialog-footer">
                            <el-button  @click="addeditflagline = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
                    </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {getLogoList,logoSave} from "../../api/abbNewApi";
export default {


  data() {
    return {
      tableData:[

      ],
      diaisMask:false,
      caozuoType:"新增",
      addeditflagline:false,
      temp:{
        rightname:"",
        webpage:""
      },
      logoPhoto: '',
      myunitId:"",
      saveEnable:{}
    };
  },

  mounted() {
    // console.log("data",this.dataList);
    if(this.dataList.length != 0){
       this.myunitId = this.dataList[0].id
       this.getList()
    }
    // console.log("userDetailed",localStorage.getItem('userDetailed'));
    
  },
  computed: {
      dataList () {
        var data=this.$store.unitStore.getters.getUnitTree
        return isempty(data)? []:[unitList(data)]
      },
    },

  methods: {
    //获取列表数据
      getList() {
        if(this.myunitId == ""){
            return
        }
        var d={
          'unitId': this.myunitId
        }
        getLogoList(d).then(res => {
          if(res.code==200) {
            var data=res.data
            data.forEach(item => {
              item.enable = item.enable == 0? false : true
              if(!item.systemName) {
                item.systemName=""
              }
            })
            this.tableData=data;
          }
        })
      },
     addfn(){
        this.logoPhoto = ""
        this.caozuoType = "新增"
        this.addeditflagline = true
     },
     editfn(row){
        this.nowMenu = row
        this.logoPhoto = row.logoInfo
        this.caozuoType = "修改"
        this.addeditflagline = true
     },
     addpassageway(){
        
        if(this.logoPhoto == ""){
              this.$message({showClose: true,message: 'logo不能为空',type: 'warning'});
              return
        }
        var dd = {
            unitId:this.myunitId,
            enable:0,
            logoInfo:this.logoPhoto,
            systemName:"",
        }
        if(this.caozuoType == '新增'){
            logoSave(dd).then(res => {
              if(res.code==200) {
                this.getList()
                this.addeditflagline=false;
                this.$message({showClose: true,message: '添加成功',type: 'success'});
              } else {
                this.$message({showClose: true,message: '添加失败',type: 'error'});
              }
            })
        }else {
              dd.id = this.nowMenu.id
              dd.enable = this.nowMenu.enable == true ? 1 : 0
              logoSave(dd).then(res => {
              if(res.code==200) {
                this.getList()
                this.addeditflagline=false;
                this.$message({showClose: true,message: '编辑成功',type: 'success'});
              } else {
                this.$message({showClose: true,message: '编辑失败',type: 'error'});
              }
            })
        }
     },
     
      //改变状态
      switchChange(row){
        this.saveEnable=row
        if(row.enable) {
          var id=row.id
          let index=this.tableData.findIndex(item => item.id==id)
          // console.log("首页",index);
          this.tableData.forEach(item => item.enable=false)
          this.tableData[index].enable=true
        }
        this.save_fn()
      },
      //上传自定义图标
      icon_fn (file) {
        this.getBase64(file.raw).then(res => {
          this.logoPhoto=res
        })
      },
      getBase64 (file) {
        return new Promise(function(resolve,reject) {
          const reader=new FileReader()
          let imgResult=''
          reader.readAsDataURL(file)
          reader.onload=function() {
            imgResult=reader.result
          }
          reader.onerror=function(error) {
            reject(error)
          }
          reader.onloadend=function() {
            resolve(imgResult)
          }
        })
      },
      save_fn () {
        this.saveEnable.enable = this.saveEnable.enable == true ? 1 : 0
        logoSave(this.saveEnable).then(res => {
          if(res.code==200) {
            this.getList()
            this.$message({showClose: true,message: '启用成功',type: 'success'});
          } else {
            this.$message({showClose: true,message: '启用失败',type: 'error'});
          }
        })

      }
  },
};
</script>
<style lang="scss" scoped>
    .menuconfiguration {
         width: 100%;
         height: 100%;
         .con {
             width: 100%;
             height: 100%;
             background-color: #fff;
             padding: 12px;
             box-sizing: border-box;
             .topbtn {
                 width: 100%;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 border-bottom: 1px solid #CCC;
                 padding-bottom: 6px;
             }
             .mytable {
                 width: 100%;
                 height: calc(100% - 56px);
                 margin-top: 10px;
             }
         }
    }
</style>